<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>insertBefore</title>
	<style type="text/css">
	   ul{list-style: none;padding:0;margin:0;}
		li{
			list-style: none;
			background-color:red;
			margin: 5px;
			line-height: 25px;
			color: #fff;
			padding: 5px;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
          //删除DOM元素 删除一个节点
		  //删除LI
        var box=document.getElementById('box');
        var lis=box.getElementsByTagName('li');
        var as=box.getElementsByTagName('a');
       
       for (var i = 0; i < as.length; i++) {
       	  as[i].onclick=function(){
       	  	   //this.parentNode
       	  	   //当前的this.parentNode的父节点是LI、所以我们删除的也就是ID-BOX下面的LI元素
               box.removeChild(this.parentNode);
          };
       }

		//文档碎片
		//文档碎片可以提高DOM操作性能（理论上）
		//文档碎片原理
		//document.createDocumentFragment()
		}
	</script>
</head>
<body>
	<ul id="box">
       <li>a<a href="javascript:;">del</a></li> 
       <li>b<a href="javascript:;">del</a></li>
       <li>c<a href="javascript:;">del</a></li>
       <li>s<a href="javascript:;">del</a></li>
       <li>d<a href="javascript:;">del</a></li>
       <li>f<a href="javascript:;">del</a></li>
       <li>n<a href="javascript:;">del</a></li>
	</ul>
</body>
</html>